<template>
  <el-drawer
    v-model="visible"
    title="图表配置"
    size="500px"
    :destroy-on-close="true"
  >
    <el-form
      ref="formRef"
      :model="form"
      :rules="rules"
      label-width="100px"
    >
      <el-form-item label="图表标题" prop="title">
        <el-input v-model="form.title" placeholder="请输入图表标题" />
      </el-form-item>
      
      <el-form-item label="图表类型" prop="type">
        <el-select v-model="form.type" placeholder="请选择图表类型">
          <el-option label="折线图" value="line" />
          <el-option label="柱状图" value="bar" />
          <el-option label="饼图" value="pie" />
        </el-select>
      </el-form-item>
      
      <el-form-item label="数据源" prop="dataSource">
        <el-select v-model="form.dataSource.type" placeholder="请选择数据源类型">
          <el-option label="静态数据" value="static" />
          <el-option label="API接口" value="api" />
          <el-option label="SQL查询" value="sql" />
        </el-select>
      </el-form-item>
      
      <!-- 静态数据配置 -->
      <template v-if="form.dataSource.type === 'static'">
        <el-form-item label="数据配置">
          <monaco-editor
            v-model="form.dataSource.data"
            language="json"
            :height="200"
            :options="{
              formatOnPaste: true,
              formatOnType: true
            }"
          />
        </el-form-item>
      </template>
      
      <!-- API接口配置 -->
      <template v-if="form.dataSource.type === 'api'">
        <el-form-item label="接口地址" prop="dataSource.url">
          <el-input v-model="form.dataSource.url" placeholder="请输入接口地址" />
        </el-form-item>
        <el-form-item label="请求方法">
          <el-select v-model="form.dataSource.method">
            <el-option label="GET" value="GET" />
            <el-option label="POST" value="POST" />
          </el-select>
        </el-form-item>
        <el-form-item label="请求参数">
          <monaco-editor
            v-model="form.dataSource.params"
            language="json"
            :height="150"
          />
        </el-form-item>
      </template>
      
      <!-- SQL查询配置 -->
      <template v-if="form.dataSource.type === 'sql'">
        <el-form-item label="SQL语句">
          <monaco-editor
            v-model="form.dataSource.sql"
            language="sql"
            :height="200"
          />
        </el-form-item>
      </template>
      
      <!-- 图表样式配置 -->
      <el-form-item label="图表样式">
        <monaco-editor
          v-model="form.config"
          language="json"
          :height="200"
        />
      </el-form-item>
    </el-form>
    
    <template #footer>
      <el-button @click="visible = false">取 消</el-button>
      <el-button type="primary" @click="handleConfirm">确 定</el-button>
    </template>
  </el-drawer>
</template>

<script setup lang="ts">
import { ref, watch, computed } from 'vue';
import MonacoEditor from '@/components/MonacoEditor/index.vue';
import type { FormInstance } from 'element-plus';

const props = defineProps({
  modelValue: Boolean,
  chartData: Object
});

const emit = defineEmits(['update:modelValue', 'confirm']);

const visible = computed({
  get: () => props.modelValue,
  set: (val) => emit('update:modelValue', val)
});

const formRef = ref<FormInstance>();
const form = ref({
  title: '',
  type: 'line',
  dataSource: {
    type: 'static',
    data: '[]',
    url: '',
    method: 'GET',
    params: '{}',
    sql: ''
  },
  config: '{}'
});

const rules = {
  title: [{ required: true, message: '请输入图表标题', trigger: 'blur' }],
  type: [{ required: true, message: '请选择图表类型', trigger: 'change' }]
};

// 监听图表数据变化
watch(() => props.chartData, (val) => {
  if (val) {
    form.value = { ...val };
  }
}, { immediate: true });

// 确认配置
const handleConfirm = async () => {
  if (!formRef.value) return;
  
  await formRef.value.validate((valid) => {
    if (valid) {
      emit('confirm', { ...props.chartData, ...form.value });
      visible.value = false;
    }
  });
};
</script> 